<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 
        常用全局echarts的对象：
        init 初始化对象 , registerTheme 注册主题 , registerMap 注册地图, connect 可以将多个图标进行关联
        connect 使用方式是 echarts.connect([需要进行关联的两个图表])，在进行下载的时候会将两个或者多个图表进行关联下载
    
        常用的实例echarts对象：
        setOption 可以实现多次调用，可以用于互补（合并新旧的代码）
        resize 可以对图片的自适应的实现
        on\off 绑定或者解绑一些事件
        鼠标事件 click dbclick等
        实例对象的事件，有一些特定的事件但是需要通过on等来监听这些事件  如：legendselectchanged（需要先有legend这个属性），datazoom等
        echarts.dispatchAction({
            type:'highlight'，
            seriesIndex:0,//系列的索引
            dataIndex:1 //将对那一个数据进行处理
        })
        echarts.clear() 并不是真正的进行销毁  对图表实例进行清空，但是被清空后，可以再次将数据进行增添起来
        echarts.dispose() 对图表实例进行销毁 ，销毁后不能再次增添
    -->
     <div style="height:400px; width:600px;"></div>
</body>
<script>
    let mEcharts = echarts.init(document.querySelector('div'),'dark')
    var xData=['张三','李四','王五','赵六','钱七']
    var yData=[70,80,60,100,90]
    var option = {
        legend:{
            data:['成绩']
        },
        xAxis:{
            type:'category',
            data:xData,
        },
        yAxis:{
            type:'value'
        },
        series:[
            {
                name:'成绩',
                data:yData,
                type:'bar'
            }
        ]
    }

mEcharts.setOption(option)
mEcharts.on('click',function(arg){//通过实例对象的on添加事件，arg和事件相关的数据信息
    console.log(arg);
    console.log('click..');
})
// 都通过off这个关键词来进行解绑
mEcharts.on('legendselectchanged',function(arg){
    console.log(arg);
})
</script>
</html>